<template>
  <div>
    <el-tabs>
      <el-tab-pane label="未分配">
        <el-table
          :data="ItemList"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            label="任务id">
          </el-table-column>
          <el-table-column
            prop="task"
            label="任务">
          </el-table-column>
          <el-table-column
            prop="progress"
            label="进度">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
          </el-table-column>
          <el-table-column
            label="稽查员id">
            <template slot-scope="scope">
              <el-select v-model="scope.row.IID" @change="modifyInspector(scope.row)">
                <el-option
                  v-for="(item,index) in inspectorList"
                  :key="index"
                  :label="item.IID"
                  :value="item.IID">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="进行中">
        <el-table
          :data="doingList"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            label="任务id">
          </el-table-column>
          <el-table-column
            prop="task"
            label="任务">
          </el-table-column>
          <el-table-column
            prop="progress"
            label="进度">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
          </el-table-column>
          <el-table-column
            label="稽查员id">
            <template slot-scope="scope">
              <el-select v-model="scope.row.IID" @change="modifyInspector(scope.row)" disabled>
                <el-option
                  v-for="(item,index) in inspectorList"
                  :key="index"
                  :label="item.IID"
                  :value="item.IID">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已完成">
        <el-table
          :data="doneList"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            label="任务id">
          </el-table-column>
          <el-table-column
            prop="task"
            label="任务">
          </el-table-column>
          <el-table-column
            prop="progress"
            label="进度">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
          </el-table-column>
          <el-table-column
            label="稽查员id">
            <template slot-scope="scope">
              <el-select v-model="scope.row.IID" @change="modifyInspector(scope.row)" disabled>
                <el-option
                  v-for="(item,index) in inspectorList"
                  :key="index"
                  :label="item.IID"
                  :value="item.IID">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Distribution",
      data(){
          return{
            ItemList:[],
            doingList:[],
            doneList:[],
            inspectorList:[],
          }
      },
      mounted() {
          this.getItemList();
          this.getDoingList();
          this.getDoneList();
          this.getInspectorList();;
      },
      methods:{
          async getInspectorList(){
            axios.post('/inspector/get',{}).then((res)=>{
              console.log(res)
              this.inspectorList=res.data.data
              console.log(this.inspectorList)
            })
          },
        async getItemList(){
          axios.post('owner-inspector-apeal/get',{status:'0'}).then((res)=>{
            console.log(res)
            this.ItemList=res.data.data
          })
        },
        async getDoingList(){
          axios.post('owner-inspector-apeal/get',{status:'3'}).then((res)=>{
            console.log(res)
            this.doingList=res.data.data
          })
        },
        async getDoneList(){
          axios.post('/owner-inspector-apeal/get',{status:'1'}).then((res)=>{
            console.log(res)
            this.doneList=res.data.data
            axios.post('/owner-inspector-apeal/get',{status:'2'}).then((res)=>{
              this.doneList=this.doneList.concat(res.data.data)
            })
          })
        },
        async modifyInspector(data){
            console.log(data)
          axios.post('/inspector-admin/task-assign',data).then((res)=>{
            console.log(res)
            this.getItemList()
            this.getDoingList()
            this.getDoneList()
          })
        }
      },

    }
</script>

<style scoped>

</style>
